<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件绑定</title>
</head>
<body>
    <form action="">
            <input type="text" name="111">
            <input type="text" name="222">
            <input type="text" name="333">
            <input type="text" name="444">
    </form>

    <div id="0jbd" style="background-color: #00aafa">Dom 0级事件绑定演示</div>

    <div>2级事件绑定演示：
        <div id="2jbd">
            匿名函数模式演示'Dom 2级事件绑定演示'
            <div>
                <div id="another">哈哈哈</div>
            </div>
        </div>
    </div>

    <div>事件委托绑定演示：</div>
    <ul>
        <li>哈哈哈1</li>
        <li>哈哈哈2</li>
        <li>哈哈哈3</li>
        <li>哈哈哈4</li>
        <li>哈哈哈5</li>
        <li>哈哈哈6</li>
        <li>哈哈哈7</li>
        <li>哈哈哈8</li>
        <li>哈哈哈9</li>
        <li>哈哈哈10</li>
    </ul>
    <script>
        /**
         * Dom 0级事件绑定
         */
        // document.getElementById('0jbd').onclick = function (){
        //     console.log(111);
        //     alert('Dom 0级事件绑定演示');
        // };

        // 非匿名函数模式
        document.getElementById('0jbd').onclick = f;
        function f() {
            alert("非匿名函数模式演示'Dom 0级事件绑定演示'")
        };

        // DOM 2级事件绑定
        /**
         * addEventListener 绑定一个事件
         *
         * 参数1：事件名称
         * 参数2：事件的处理程序
         * 参数3：标注是在捕获阶段（true）还是冒泡阶段（false）绑定事件处理程序， 默认是false
         *
         */
        document.getElementById('another').addEventListener('click',function (e) {
            alert('未阻止事件冒泡时');
            console.log('阻止事件冒泡');
            //知识点质疑还未能区分两者的区别
            e.stopPropagation();
            e.stopImmediatePropagation();

        },false);
        document.getElementById('2jbd').addEventListener('click',function () {
            alert("匿名函数模式演示'Dom 2级事件绑定演示'");
        },false);

        //事件委托绑定
        // var lis = document.querySelectorAll('ul li');
        // for (var i = 0; i < 10; i++) {
        //     lis[i].onclick = function () {
        //         console.log(this.innerText)
        //     }
        // }

        var ul = document.querySelector('ul');
        ul.addEventListener('click',function (e) {
            console.log(e.target.innerText);
        });

    </script>

</body>
</html>